<template>
  <v-chart :options="orgOption" autoresize />
</template>

<script>
export default {
  name: "ChargePie",
  data() {
    return {
      data: [
        {
          value: 3600,
          name: "已收"
        },
        {
          value: 5400,
          name: "未收"
        },
        {
          value: 2600,
          name: "预收"
        }
      ]
    };
  },
  computed: {
    orgOption() {
      return {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
          backgroundColor: "rgba(255,255,255,0.1)"
        },
        label: {
          formatter: "{b} : {d}%"
        },
        series: [
          {
            type: "pie",
            radius: ["20%", "50%"],
            selectedMode: "single",
            clockwise: true,
            center: ["50%", "50%"],
            color: ["#43cadd", "#3893e5", "#FCC708", "#03B48E"],
            data: this.data,
            roseType: "radius",
            labelLine: {
              length: 5
            }
          }
        ]
      };
    }
  }
};
</script>

<style scoped>
.echarts {
  height: 20vh !important;
}
</style>
